<template>
  <div class="dra-body" @click="bodyClickHandle">
    <el-row class="center-board-row" >
      <el-form class="m-vat-form"  :label-position="formConfig.labelPosition">
        <common-draggable
          :layouts="layouts"
        ></common-draggable>
      </el-form>
    </el-row>
    <div v-show="!layouts.length" class="empty-info">
      从左侧拖入或点选组件进行表单设计
    </div>
  </div>
</template>
<script>
import {mapState} from "vuex"
import CommonDraggable from "./common-draggable.vue";
import Vue from "vue";
Vue.component("common-draggable",CommonDraggable)
export default {
  name: "FormBody",

  computed:{
    ...mapState({
      layouts:state=>state.formGen.layouts,
      formConfig:state=>state.formGen.formConfig,
    })
  },
  methods:{
    bodyClickHandle(){
      this.$store.dispatch("formGen/CLEAN_COMPONENT")
    }
  }
}
</script>
<style scoped lang="scss">
.dra-body{
  width: 100%;
  height: 100%;
  overflow: auto;
  margin:0 auto;
  position: relative;
  padding:10px 0;
}
.empty-info{
  position: absolute;
  top:50%;
  left:0;
  right:0;
  transform: translateY(-50);
  text-align: center;
  font-size: 18px;
  color: #ccb1ea;
  letter-spacing: 4px;
}
</style>
